<template>
	<div class="news_show_wrapper">
		<div class="aside">
			<div class="headbox">
				<h2>{{ columnData.meta.title }}</h2>
			</div>
			<div class="content">
				<router-link v-for="(item, index) in columnSubData" :key="index" :to="item.path"
					class="el-icon-arrow-right">{{ showMenuData(item.path) }}</router-link>
			</div>
		</div>
		<router-view class="blist" />
	</div>
</template>

<script>
	import { mapGetters } from 'vuex';
	export default {
		computed: {
			...mapGetters(['menuData']),
			columnData() {
				let columnArr = this.$route.matched;
				return columnArr[columnArr.length - 2];
			},
			columnSubData() {
				let routeArr = this.$router.options.routes;
				let mainRoute = routeArr[routeArr.length - 1];
				let bookRoute = mainRoute.children.find(item => item.name === this.columnData.name);
				return bookRoute.children.filter(item => !item.hidden);
			}
		},
		methods: {
			showMenuData(path) {
				let flatArr = this.$treeToFlat(this.menuData);
				let obj = flatArr.find(item => item.value === path);
				return obj.name;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.news_show_wrapper {
		display: flex;
		align-items: flex-start;
		height: 100%;

		.aside {
			width: 290px;
			flex-shrink: 0;
			margin-right: 40px;
			border: solid 1px #f4f4f4;
		}

		.headbox {
			display: flex;
			align-items: center;
			padding: 0 15px;
			height: 72px;
			background: url('../../assets/img/bg_aside_title.png') no-repeat center;

			h2 {
				font-size: 24px;
				line-height: 66px;
				font-weight: bold;
				font-family: 'simsun';
				color: #357c65;
				border-bottom: solid 3px #357c65;
				padding-top: 3px;
			}
		}

		.content {
			margin-top: 24px;

			a {
				display: block;
				height: 64px;
				line-height: 64px;
				padding: 0 15px;
				font-size: 18px;
				color: #2f3233;
				text-decoration: none;
				border-top: solid 1px #f4f4f4;

				&::before {
					display: none;
					font-size: 14px;
					margin-right: 10px;
				}

				&.router-link-active,
				&:hover {
					background-color: #357c65;
					color: #fff;

					&::before {
						display: inline;
					}
				}
			}
		}

		.blist {
			flex: 1;
			height: 100%;
			overflow: hidden;
		}
	}
</style>